"use client";
{{#if (eq payments "polar")}}
import { Button } from "@/components/ui/button";
{{/if}}
import { authClient } from "@/lib/auth-client";
{{#if (eq api "orpc")}}
import { useQuery } from "@tanstack/react-query";
import { orpc } from "@/utils/orpc";
{{/if}}
{{#if (eq api "trpc")}}
import { useQuery } from "@tanstack/react-query";
import { trpc } from "@/utils/trpc";
{{/if}}

export default function Dashboard({
	{{#if (eq payments "polar")}}
	customerState,
	{{/if}}
	session
}: {
	{{#if (eq payments "polar")}}
	customerState: ReturnType<typeof authClient.customer.state>;
	{{/if}}
	session: typeof authClient.$Infer.Session;
}) {
	{{#if (eq api "orpc")}}
	const privateData = useQuery(orpc.privateData.queryOptions());
	{{/if}}
	{{#if (eq api "trpc")}}
	const privateData = useQuery(trpc.privateData.queryOptions());
	{{/if}}

	{{#if (eq payments "polar")}}
	const hasProSubscription = customerState?.activeSubscriptions?.length! > 0;
	console.log("Active subscriptions:", customerState?.activeSubscriptions);
	{{/if}}

	return (
		<>
			{{#if (eq api "orpc")}}
			<p>API: {privateData.data?.message}</p>
			{{/if}}
			{{#if (eq api "trpc")}}
			<p>API: {privateData.data?.message}</p>
			{{/if}}
			{{#if (eq payments "polar")}}
			<p>Plan: {hasProSubscription ? "Pro" : "Free"}</p>
			{hasProSubscription ? (
				<Button onClick={async () => await authClient.customer.portal()}>
					Manage Subscription
				</Button>
			) : (
				<Button onClick={async () => await authClient.checkout({ slug: "pro" })}>
					Upgrade to Pro
				</Button>
			)}
			{{/if}}
		</>
	);
}
